<#include "/common/taglibs.ftl" />
<@menu code='${entityName!}'/>
<title><@spring.message code="${entityName!}" /> - <@spring.message code="list" /></title>
<div class="m-portlet m-portlet--mobile">
    <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">
                    <i class="la la-user"></i> <@spring.message code="${entityName!}"/>
                </h3>
            </div>
        </div>
    </div>
    <div class="m-portlet__body">
        <div class="table-container">
            <@showMessage />
            <@tableHeaderButtons resourceIdentity='${resourceIdentity!}' />
            <@tableColumnButtons resourceIdentity='${resourceIdentity!}'>
                <button class="btn btn-sm btn-outline-brand m-btn m-btn--icon m-btn--pill" data-type='add-user'><i class="la la-users"></i> <@spring.message code="group.add.user"/></button>
                <button class="btn btn-sm btn-outline-brand m-btn m-btn--icon m-btn--pill" data-type='add-organization'><i class="la la-sitemap"></i> <@spring.message code="group.add.organization"/></button>
            </@tableColumnButtons>
            <table class="table table-striped- table-bordered table-hover table-checkable dataTable dtr-inline" id="datatable"
                   data-datatable="true"
                   data-datatable-advance-search="show"
                   data-datatable-draw-callback="drawCallback"
                   data-datatable-quick-search-filter="search_LIKE_name"
            >
                <thead>
                <tr role="row" class="heading">
                    <th width="1%" data-checkable="true" data-orderable="false"></th>
                    <th width="5%" data-data="id" data-searchable="false"> ID# </th>
                    <th width="10%" data-data="name"> <@spring.message code="group.name"/> </th>
                    <th width="10%" data-data="defaultGroup" data-render="renderBoolean" data-search-type="<@searchTypeSelectBoolean/>"> <@spring.message code="group.default"/> </th>
                    <th width="10%" data-data="activated" data-render="renderBoolean" data-search-type="<@searchTypeSelectBoolean/>"> <@spring.message code="activated"/> </th>
                    <th data-data="type" data-render="renderGroupType" data-search-type="<@searchTypeSelect items=types/>"> <@spring.message code="group.type"/> </th>
                    <th width="15%" class="center" data-data="lastModifiedDate" data-search-type="daterange" data-render="renderDateTime"> <@spring.message code="lastModifyDate"/> </th>
                    <th width="15%" data-actions="true"> <@spring.message code="action"/> </th>
                </tr>
                </thead>
                <tbody> </tbody>
            </table>
        </div>
    </div>
</div>

<page-plugin-style>
</page-plugin-style>
<page-style>
</page-style>
<page-plugin-script>
</page-plugin-script>
<page-script>
    <script>
        var renderGroupType = function ( data, type, full, meta ){
            if(data=='user'){
                return '<@spring.message code="group.type.user"/>';
            } else {
                return '<@spring.message code="group.type.organization"/>';
            }
        }

        var drawCallback = function(grid, $table){
            if(grid.getDataTable().data().length==0) return;
            $table.find("tbody tr").each(function () {
                var rowData = grid.getDataTable().row(this).data();
                if (rowData) {
                    if (rowData.type != 'user') {
                        $(this).find("button[data-type='add-user']").remove();
                    } else {
                        $(this).find("button[data-type='add-organization']").remove();
                    }
                }
            });
        }

        $('#datatable').on('action.mdt.row.button', function (e, grid, $table, $button, rowIndex, rowData) {
            console.log('action.mdt.row.button', e, grid, $table, $button, rowIndex, rowData);
            var type = $button.data("type");
            if(type === 'add-user'){
                window.location.href = "${ctx}/system/group/relation/user/" + rowData.id + "/list";
            } else if(type === 'add-organization'){
                window.location.href = "${ctx}/system/group/relation/organization/" + rowData.id + "/list";
            }
        });
    </script>
</page-script>